<template>
  <div>
    <div class="top">
      <!-- 头部组件 -->
      <ct-header />
      <!-- 搜索框组件 -->
      <ct-search />
    </div>
    <div class="middle">
      <div>
        <!-- 肤质近况组件 -->
        <ct-skin-type />
        <!-- 按需定制组件 -->
        <ct-need-list />
        <!-- 按类选择 -->
        <ct-type-list />
        <!-- 医美定制 -->
        <ct-beauty-list />
        <!-- 精品库新品 -->
        <ct-new-products @finish-getdata="addBetterScroll" />
      </div>
    </div>
  </div>
</template>

<script>
import CtHeader from "../../components/customize/CtHeader.vue";
import CtSearch from "../../components/customize/CtSearch.vue";
import CtSkinType from "../../components/customize/CtSkinType.vue";
import CtNeedList from "../../components/customize/CtNeedList.vue";
import CtTypeList from "../../components/customize/CtTypeList.vue";
import CtBeautyList from "../../components/customize/CtBeautyList.vue";
import CtNewProducts from "../../components/customize/CtNewProducts.vue";

// 引入better-scroll
import BScroll from "better-scroll";

export default {
  data() {
    return {};
  },

  components: {
    CtHeader,
    CtSearch,
    CtSkinType,
    CtNeedList,
    CtTypeList,
    CtBeautyList,
    CtNewProducts,
  },

  methods: {
    // 给内容区添加 better-scroll 效果
    addBetterScroll() {
      new BScroll(".middle", {
        //横向滚动效果
        scrollX: false,
        // 纵向滚动效果
        scrollY: true,
        // 是否保留点击事件
        click: true,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

.middle {
  width: 100%;
  position: fixed;
  top: 235px;
  bottom: 100px;
  // 添加 better-scroll 时要设置为 hidden
  overflow: hidden;
}
</style>
